﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Settings</title>
    
    <meta name="keywords" content="settings preferences"/>
    
    

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="settings.css" rel="stylesheet" />
    <script src="settings.js"></script>
</head>
<body>
    <div class="settings fragment">
        
        <!-- BEGINSETTINGSFLYOUT -->
        <div id="preferencesDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="App Settings Flyout">
            <!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
            <div class="win-ui-dark win-header">
                <button data-win-control="WinJS.UI.BackButton" onclick="WinJS.UI.SettingsFlyout.show()"></button>
                <div class="win-label">Preferences</div>
            </div>
            <div class="win-content">
                <div class="win-settings-section">
                    <h3>Tile Color</h3>
                    <p>Choose the tile color for your home page</p>
                    <div id="tileColors"><div></div><div></div><div></div><div></div><div></div><div></div></div>
                </div>
                <div class="win-settings-section" style="display:none;">
                    <h3>Group by tag</h3>
                    <div id="tglTagGroup" data-win-control="WinJS.UI.ToggleSwitch" 
                        data-win-options="{checked:false}">
                    </div>
                </div>
                <div class="win-settings-section" style="display:none;">
                    <h3>Sort order</h3>
                    <select id="sortBy" aria-label="Demo sort order select control">
                        <option value="name" selected>Name</option>
                        <option value="date">Date added</option>
                        <option value="rating">Rating</option>
                    </select>
                </div>


                <div class="win-settings-section" style="display:none;">
                    <h3>Toggle switch</h3>
                    <p>Use toggle switches to let users set Boolean values.</p>
                    <div id="Toggle1" data-win-control="WinJS.UI.ToggleSwitch" 
                        data-win-options="{title:'Download updates automatically',checked:true}">
                    </div>
                    <div id="Toggle2" data-win-control="WinJS.UI.ToggleSwitch" 
                        data-win-options="{title:'Install updates automatically'}">
                    </div>
                </div>
                <div class="win-settings-section" style="display:none;">
                    <h3>Push button</h3>
                    <p>With a push button, users initiate an immediate action.</p>
                    <label>Button label</label>
                    <button type="button" onclick="WinJS.log && WinJS.log(
                        'Clear history button pressed', 'samples', 'status')">Clear</button>
                </div>
                <div class="win-settings-section" style="display:none;">
                    <h3>Select control</h3>
                    <p>Use the select control to allow users to select one item 
                       from a set of text-only items.</p>
                    <label>State</label>
                    <select aria-label="State select control">
                        <option value="AK">Alaska</option>
                        <option value="CA">California</option>
                        <option value="CO">Colorado</option>
                        <option value="HI">Hawaii</option>
                        <option value="ID">Idaho</option>
                        <option value="KS">Kansas</option>
                        <option value="MT">Montana</option>
                        <option value="NE">Nebraska</option>
                        <option value="NV">Nevada</option>
                        <option value="NM">New Mexico</option>
                        <option value="ND">North Dakota</option>
                        <option value="OR">Oregon</option>
                        <option value="SD">South Dakota</option>
                        <option value="TX">Texas</option>
                        <option value="UT">Utah</option>
                        <option value="WA" selected>Washington</option>
                        <option value="WY">Wyoming</option>
                    </select>
                </div>
                <div class="win-settings-section" style="display:none;">
                    <h3>Hyperlink</h3>
                    <p>Use a hyperlink when the associated action will take the user out of 
                       this flyout.</p>
                    <a href="http://go.microsoft.com/fwlink/?LinkID=190175" 
                       target="fix_link_too">View privacy statement</a>
                </div>
                <div class="win-settings-section" style="display:none;">
                    <h3>Text input box</h3>
                    <p>Use a text input box to allow users to enter text. Set the type of 
                       the text input box according to the type of text you’re capturing 
                       from the user (e.g. email or password).</p>
                    <label>Email account</label>
                    <input type="text" aria-label="Enter email account" />
                    <button type="button" onclick="WinJS.log && WinJS.log(
                    'Add email account button pressed', 'samples', 'status')">Add</button>
                </div>
                <div class="win-settings-section" style="display:none;">
                    <h3>Radio button group</h3>
                    <p>Lets users choose one item from a small set of mutually exclusive, related options.</p>
                    <label>Video quality</label>
                    <label><input type="radio" name="video" value="High" checked />High</label>
                    <label><input type="radio" name="video" value="Medium" />Medium</label>
                    <label><input type="radio" name="video" value="Low" />Low</label>
                </div>
            </div>
        </div>
        <!-- ENDSETTINGSFLYOUT -->

        <!-- The following will show if this page is directly navigated to -->
        <header aria-label="Header content" role="banner">
                        <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Settings</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <h2>Instructions to implement settings</h2>
            <h3>Step 1 - Add handler for onsettings in default.js</h3>
            <pre>
app.onsettings = function(e) {
    e.detail.applicationcommands = { "preferencesDiv": { title: "Preferences", href: "/demos/settings/settings.html" } };
    WinJS.UI.SettingsFlyout.populateSettings(e);
};
</pre>
            <h3>Step 2 - Create a new page control and add a SettingsFlyout control with id that matches the application command</h3>
            <pre>
&lt;div id="preferencesDiv" data-win-control="WinJS.UI.SettingsFlyout">
    settings panel content goes here
&lt;/div>
</pre>
            <h3>Step 3 - Show the Preferences settings flyout</h3>
            <button id="showPrefs">Show</button>
        </section>
    </div>
</body>
</html>
